<template>
  <div id="views">
    <section id="sec1" class="tabbar">
      <span class="floatleft" :class="active === 0 ? 'active' :''" @click="selectType(0)">
        <span>未使用</span>
      </span>
      <span :class="active === 1 ? 'active' :''" @click="selectType(1)">
        <span>已使用</span>
      </span>
      <span class="floatright" :class="active === 2 ? 'active' :''" @click="selectType(2)">
        <span>已过期</span>
      </span>
    </section>
    <ul id="sec2" class="listBox" v-if="active === 0">
        <li v-for="(item , index ) in list">
         <div>
           <div class="top">
             <div class="left floatleft">
               <p class="name">
                 <span class="middle">{{item.couponName}}</span>
                 <img src="../../common/imgs/expiring_soon.png" alt="图片" class="middle expiringSoon" v-if="item.expire == 1">
               </p>
               <p class="endTime">有效期至 {{item.expiryTime}}</p>
               <p class="couponType" v-if="item.type == 1">
                 <img src="../../common/imgs/deduction_v.png" alt="抵扣券">
               </p>
               <p class="couponType" v-if="item.type == 2">
                 <img src="../../common/imgs/cash_v.png" alt="现金券">
               </p>
             </div>
             <div class="right floatright">
               <p class="money">
                 <span class="num">{{item.confMap.CNY.dis}}</span>
                 <span class="unit">CNY</span>
               </p>
               <p class="canUse" v-if="item.type ==1">满{{item.confMap.CNY.cond}}可用</p>
               <p class="canUse2" v-if="item.type ==1">{{item.confMap.USDT.dis}} USDT,满{{item.confMap.USDT.cond}}可用</p>
             </div>
           </div>
           <div class="rules">
             <div class="top">
               <span class="title hoverhand" :class="item.show ? 'bottomJt' : 'rightJt'" @click="openItemRule(index)">使用规则</span>
               <router-link class="justUse" to="/entrance" v-if="item.type == 1">立即使用</router-link>
               <a href="javascript:;" class="justUse" v-if="item.type == 2" @click="JustuseCashCoupon(item)">立即使用</a>
             </div>
             <transition name="open">
             <ul class="rulesList" v-if="item.show" v-html="item.ruleDesc">
              </ul>
             </transition>
           </div>
         </div>
        </li>
    </ul>
    <ul id="sec3" class="listBox isUsed" v-if="active === 1">
      <li v-for="(item , index ) in list">
        <div>
          <div class="top">
            <div class="left floatleft">
              <p class="name">
                <span class="middle">{{item.couponName}}</span>
                <!--              <img src="../../common/imgs/expiring_soon.png" alt="图片" class="middle expiringSoon">-->
              </p>
              <p class="endTime">有效期至 {{item.expiryTime}}</p>
              <p class="couponType" v-if="item.type == 1">
                <img src="../../common/imgs/deduction_v_grey.png" alt="抵扣券">
              </p>
              <p class="couponType" v-if="item.type == 2">
                <img src="../../common/imgs/cash_v_grey.png" alt="现金券">
              </p>
            </div>
            <div class="right floatright">
              <p class="money">
                <span class="num">{{item.confMap.CNY.dis}}</span>
                <span class="unit">CNY</span>
              </p>
              <p class="canUse" v-if="item.type ==1">满{{item.confMap.CNY.cond}}可用</p>
              <p class="canUse2" v-if="item.type ==1">{{item.confMap.USDT.dis}} USDT,满{{item.confMap.USDT.cond}}可用</p>
            </div>
          </div>
          <div class="rules">
            <div class="top">
              <span class="title rightJt">使用规则</span>
            </div>
          </div>
          <img src="../../common/imgs/coupon_isuse.png" alt="已使用" class="isuserimg">
        </div>
      </li>
    </ul>
    <ul id="sec4" class="listBox outDate" v-if="active === 2">
      <li v-for="(item , index ) in list">
        <div>
          <div class="top">
            <div class="left floatleft">
              <p class="name">
                <span class="middle">{{item.couponName}}</span>
              </p>
              <p class="endTime">有效期至 {{item.expiryTime}}</p>
              <p class="couponType" v-if="item.type == 1">
                <img src="../../common/imgs/deduction_v_grey.png" alt="抵扣券">
              </p>
              <p class="couponType" v-if="item.type == 2">
                <img src="../../common/imgs/cash_v_grey.png" alt="现金券">
              </p>
            </div>
            <div class="right floatright">
              <p class="money">
                <span class="num">{{item.confMap.CNY.dis}}</span>
                <span class="unit">CNY</span>
              </p>
              <p class="canUse" v-if="item.type ==1">满{{item.confMap.CNY.cond}}可用</p>
              <p class="canUse2" v-if="item.type ==1">{{item.confMap.USDT.dis}} USDT,满{{item.confMap.USDT.cond}}可用</p>
            </div>
          </div>
          <div class="rules">
            <div class="top">
              <span class="title rightJt">使用规则</span>
            </div>
          </div>
          <img src="../../common/imgs/out_date.png" alt="已使用" class="isuserimg">
        </div>
      </li>
    </ul>
    <p class="loadInfo" v-if="showLoading">{{loadInfo}}</p>
    <div class="notCoupon" v-if="notCoupon">
      <p class="img">
        <img src="../../common/imgs/not_coupon.png" alt="无">
      </p>
      <p class="msg">暂无优惠券~</p>
    </div>
    <dia-logtwo ref="refb" title="提示" @confirm="confirmUseCashCoupon()" confirmBtn="确认充值"/>
  </div>
</template>
<script>
  import { getCouponList , useCashCoupon } from '../../http/api'
  export default {
    name : 'coupon',
    inject : ['reload'],
    data(){
      return{
        name : '优惠券',
        active : 0 , //选择的优惠券index
        list:[
          // {show:false},{show:false},{show:false}
        ],
        notCoupon : false,
        showLoading : true,
        loadInfo : '加载中...',
        page : 0,
        totalPage : 1,
        acceptLoad : true,
        addCashCoupon : '', //确认充值的现金券
      }
    },
    components:{
      DiaLogtwo: resolve => {require(['../../components/dialogTwo'], resolve)},
    },
    mounted(){
      let thiz = this;
      thiz.loadPage();
    },
    methods:{
      loadMore(){
        let thiz = this;
        thiz.toBottom( res => {
          if( thiz.acceptLoad ){
            thiz.loadPage()
          }
        });
      },
      reset(){
        this.list = [];
        this.notCoupon = false;
        this.showLoading = true;
        this.loadInfo = '加载中...';
        this.page = 0;
        this.totalPage = 1;
        this.acceptLoad = true;
        this.loadPage();
      },
      loadPage(){
        let thiz = this;
        if( !thiz.acceptLoad ){
          return;
        }
        let params = {
          currencyCode : 'CNY',
          page : thiz.page + 1,
          lens : 20,
          status : thiz.active + 1
        };
        getCouponList(params).then(res => {
          if(res.code == 200){
            let data = res.data;
            thiz.totalPage = data.totalPage;
            thiz.page = thiz.page + 1;
            let list = data.lists;
            thiz.for(  list , function (item , index ) {
              item.show = false;
            });
            thiz.list = thiz.list.concat(list);
            thiz.afterGetList();
            window.addEventListener('scroll',thiz.loadMore,true);
          }
        })
      },
      afterGetList(){
        let len = this.list.length;
        this.notCoupon = len === 0 ? true : false;
        this.showLoading = len === 0 ? false : true;
        if( this.page >= this.totalPage ){
          this.loadInfo = '到底了...';
          this.acceptLoad = false;
        } else {
          this.loadInfo = '到底加载更多...';
          this.acceptLoad = true;
        }
        let rulesLists = document.getElementsByClassName('rulesList');
        this.for(rulesLists , function (item , index) {
          let curH = item.offsetHeight;
          item.style.height =  curH +'px';
        });
      },
      selectType( index ){
        //点击选择类型
        this.active = this.active === index ? this.active : index;
        this.reset();
      },
      openItemRule( index ){
        let list = this.list;
        this.for( list , function (item , curindex ) {
          if( index === curindex ){
            item.show = !item.show;
          }else{
            item.show = false;
          }
        });
        this.list = list;
      },
      JustuseCashCoupon(item) {
        let thiz = this;
        this.addCashCoupon = item;
        let dialogConfirm = '<p class="textcenter" style="font-size: 0.28rem;padding-bottom:0.21rem;">确认使用现金券充值到余额么？</p>' +
          '<p class="textcenter" style="font-size: 0.28rem">*充值成功后可在【我的资产】中查看</p>';
        this.$refs.refb.changeContent(dialogConfirm);
        this.$refs.refb.dialogShow();
      },
      confirmUseCashCoupon(){
        let thiz = this;
        let addCashCoupon = this.addCashCoupon;
        let coupon_id = addCashCoupon.id;
        let amount = addCashCoupon.confMap.CNY.dis;
        let currency = addCashCoupon.confMap.CNY.code;
        let param = {
          coupon_id : coupon_id,
          amount : amount,
          currency : currency,
        };
        useCashCoupon(param).then( res => {
          if(res.code == 200){
            require('../../common/js/toast').toast('充值成功');
            thiz.reset();
          }
        })
      }
    },
    beforeDestroy() {
      let thiz = this;
      window.removeEventListener('scroll', thiz.loadMore , true);
    },
  }
</script>
<style type="text/less" lang="less" scoped>
  .tabbar{
    height: 0.78rem;background: #fff;overflow: hidden;text-align: center;padding: 0 0.3rem;position: fixed;z-index: 1;left: 0;top:0;width: 100%;
    >span{
      display: inline-block;padding: 0 0.4rem;height:100%;color: #898989;font-size: 0.3rem;
    }
    >.active{
      color: #262626;
    }
    >span:hover{
      cursor: pointer;
    }
    >span>span{
      height: 100%;display: inline-block;position: relative;line-height: 0.78rem;
    }
    >.active>span:after{
      content: '';display: inline-block;width: 100%;position: absolute;z-index: 1;left: 0;bottom: 0;height: 0.05rem;background: #FED130;border-radius: 0.04rem;
    }
  }
  @media screen and (min-width: 1025px) {
    .tabbar{
      width: 600px;left: 50%;margin-left: -300px;
    }
  }
  .listBox{
    padding: 0.78rem 0.3rem 0 0.3rem;
    >li{
      margin-top: 0.2rem;
      >div{
        >.top{
          height: 1.72rem;background: url("../../common/imgs/coupon_list_bg.png") center center no-repeat;background-size: 100% 100%;padding: 0.36rem 0.25rem;padding-bottom: 0;
          .left{
            >.name{
              font-size: 0.3rem;
              >.expiringSoon{
                height: 0.32rem;margin-left: 0.05rem;
              }
            }
            >.endTime{
              color: #999;font-size: 0.22rem;padding-top: 0.12rem;
            }
            >.couponType{
              padding-top: 0.09rem;font-size: 0;
              >img{
                height: 0.28rem;
              }
            }
          }
          .right{
            color: #F67311;text-align: right;
            >.money{
              font-size: 0;
              .num{
                font-size: 0.4rem;
              }
              .unit{
                font-size: 0.24rem;
              }
            }
            .canUse{
              font-size: 0.22rem;padding-top: 0.1rem;
            }
            .canUse2{
              color: #999;padding-top: 0.14rem;font-size: 0.2rem;
            }
          }
        }
        >.rules{
          background: #fff;border-bottom-left-radius: 0.08rem;border-bottom-right-radius: 0.1rem;overflow: hidden;
          >.top{
            padding: 0.16rem 0.25rem;padding-top: 0.05rem;overflow: hidden;
            >.title{
              font-size: 0.24rem;color: #999;float: left;line-height: 0.4rem;padding-right: 0.23rem;position: relative;
            }
            .rightJt:after{
              content: '';display: inline-block;width: 0.12rem;height: 0.14rem;background: url("../../common/imgs/small_grey_jt.png");background-size: 100% 100%;
              position: absolute;right: 0;top:50%;margin-top: -0.07rem;transform:rotate(0deg);
            }
            .bottomJt:after{
              content: '';display: inline-block;width: 0.12rem;height: 0.14rem;background: url("../../common/imgs/small_grey_jt.png");background-size: 100% 100%;
              position: absolute;right: 0;top:50%;margin-top: -0.07rem;transform:rotate(90deg);
            }
            >.justUse{
              float: right;background: #F67311;height: 0.4rem;line-height: 0.4rem;padding: 0 0.14rem;font-size: 0.22rem;color: #fff;border-radius: 0.08rem;display: inline-block;
            }
          }
          .rulesList{
            background:#fff;
            color: #595959;font-size: 0.24rem;padding-left: 0.25rem;padding-right: 0.25rem;overflow: hidden;
            /*height: 1.7rem;*/
            padding-bottom: 0.2rem;
            /deep/ li{
              position: relative;padding-left: 0.15rem;line-height: 0.4rem;
            }
            /deep/ li:before{
              content: '';width: 0.06rem;height: 0.06rem;border-radius: 50%;background: #959595;left: 0;top:50%;margin-top: -0.03rem;position: absolute;z-index: 1;
            }
          }
          .open-enter-active, .open-leave-active {
            transition: all 0.35s ease;
          }
          .open-enter, .open-leave-to{
            height: 0;
          }
        }
      }
    }
    >li:first-child{
      margin-top: 0.3rem;
    }
  }
  .isUsed,.outDate{
    >li{
      position: relative;
    }
    p,span{
      color: #c0bfbf!important;
    }
    .isuserimg{
      width: 0.92rem;height: 0.92rem;position: absolute;z-index: 1;bottom: 0.08rem;right: 0.54rem;
    }
  }
  .loadInfo{
    text-align: center;font-size: 0.24rem;line-height: 0.35rem;color: #9B9B9B;padding: 0.3rem 0;
  }
  .notCoupon{
    text-align: center;padding-top: 2rem;
    .img{
      font-size: 0;
      img{
        width: 2.08rem;
      }
    }
    .msg{
      color: #898989;font-size: 0.3rem;padding: 0.3rem 0;
    }
  }
</style>
